<template>
  <div>
    <div>
      信息验证失败:
      <CloudSteps v-model="current" :steps="steps"></CloudSteps>
      <br />
      <br />
      <br />
      <CloudSteps v-model="current1" :steps="steps1"></CloudSteps>
      <br />
      <br />
      <br />
      <CloudSteps v-model="current2" :steps="steps2"></CloudSteps>
      <br />
      <br />
      <br />
      <CloudSteps v-model="current3" :steps="steps3"></CloudSteps>
    </div>
    <div style="margin-top: 20px">
      交易取消成功：
      <CloudSteps v-model="current4" :steps="steps4"></CloudSteps>
      <br />
      <br />
      交易取消失败：
      <CloudSteps v-model="current5" :steps="steps5"></CloudSteps>
      <br />
    </div>
  </div>
</template>

<script>
  import submitError from '../../../../src/assets/image/submitError.svg';
  import cancleSuccess from '../../../../src/assets/image/cancleSuccess.svg';

  export default {
    title: '3.信息验证失败',
    data () {
      return {
        current: 0,
        current1: 1,
        current2: 2,
        current3: 3,
        current4: 2,
        current5: 2,
        steps: [
          {
            title: 'step111',
            status: '',
            subTitle: 'subTitle111',
            disabled: false,
            description: "2021-01-02 20:00:12",
            icon: submitError,
            activeIcon: submitError
          },
          {
            title: 'step222',
            status: '',
            subTitle: 'subTitle222',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step333',
            status: '',
            subTitle: 'subTitle333',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step444',
            status: '',
            subTitle: 'subTitle444',
            disabled: false,
            description: "2021-01-02 20:00:12"
          }
        ],
        steps1: [
          {
            title: 'step111',
            status: '',
            subTitle: 'subTitle111',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step222',
            status: 'error',
            subTitle: 'subTitle222',
            disabled: false,
            description: "2021-01-02 20:00:12",
            icon: submitError,
            activeIcon: submitError
          },
          {
            title: 'step333',
            status: '',
            subTitle: 'subTitle333',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step444',
            status: '',
            subTitle: 'subTitle444',
            disabled: false,
            description: "2021-01-02 20:00:12"
          }
        ],
        steps2: [
          {
            title: 'step111',
            status: '',
            subTitle: 'subTitle111',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step222',
            status: '',
            subTitle: 'subTitle222',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step333',
            status: 'error',
            subTitle: 'subTitle333',
            disabled: false,
            description: "2021-01-02 20:00:12",
            icon: submitError,
            activeIcon: submitError
          },
          {
            title: 'step444',
            status: '',
            subTitle: 'subTitle444',
            disabled: false,
            description: "2021-01-02 20:00:12"
          }
        ],
        steps3: [
          {
            title: 'step111',
            status: '',
            subTitle: 'subTitle111',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step222',
            status: '',
            subTitle: 'subTitle222',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step333',
            status: '',
            subTitle: 'subTitle333',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: 'step444',
            status: 'error',
            subTitle: 'subTitle444',
            disabled: false,
            description: "2021-01-02 20:00:12",
            icon: submitError,
            activeIcon: submitError
          }
        ],
        steps4: [
          {
            title: '已提交订单',
            status: '',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: '待商务确认',
            status: '',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: '交易失败',
            status: '',
            disabled: false,
            description: "2021-01-02 20:00:12",
            icon: cancleSuccess,
            activeIcon: cancleSuccess
          }
        ],
        steps5: [
          {
            title: '已提交订单',
            status: '',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: '待商务确认',
            status: '',
            disabled: false,
            description: "2021-01-02 20:00:12"
          },
          {
            title: '交易失败',
            status: 'error',
            disabled: false,
            description: "2021-01-02 20:00:12"
          }
        ],
      }
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
</style>